{extend name="layouts:form"/}
{block name="css_common"}
{asset:css name="select2" /}
{/block}
{block name="js_common"}
{asset:js name="select2" /}
{/block}

{block name="content"}
<style>
    .images-list {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
    }

    .img {
        width: 80px;
        height: 80px;
        background: #f1f1f1;
        margin-right: 5px;
        position: relative;
    }

    .img i {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
    }

    .img img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .content {
        padding-left: 30rpx;
    }

    .flex {
        display: flex;
    }

    .name {
        font-weight: bold;
        font-size: 18px;
        color: #0f0f0f;
        margin-bottom: 15px;
    }

    .status {
        padding: 2px 10px;
        background: #f5f5f5;
        color: #0f0f0f;
        font-size: 12px;
        margin-right: 10px;
    }

    .align-center {
        align-items: center;
    }

    .time {
        color: #cccccc;
        font-size: 12px;
    }

    .num {
        font-size: 18px;
        color: #0f0f0f;
        font-weight: 600;
    }

    .label-name {
        font-size: 14px;
        color: #333333;
    }

    .type {
        border: 1px solid #cccccc;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        color: #333333;
        font-size: 14px;
    }

    .file-content {
        border-radius: 4px;
        height: 30px;
        padding: 0 30px 0 10px;
        background: #f5f5f5;
        color: #333333;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    .file-icon {
        width: 20px;
        height: 20px;

    }

    .look {
        font-size: 14px;
        color: #1a7bb9;
    }

    .search-label {
        font-size: 14px;
        color: #333333;
        margin-right: 5px;
    }

    .input {
        border: 1px solid #cccccc;
        height: 30px;
        padding: 0 6px;
        border-radius: 4px;
        margin-right: 10px;
    }

    .margin-bottom-xs {
        margin-bottom: 10px;
    }

    .btn-search {
        height: 30px;
        line-height: 30px;
        min-width: 80px;
        border-radius: 4px;
        color: #ffffff;
        background: #0171CF;
        font-size: 14px;
        margin-right: 10px;
        text-align: center;
        cursor: pointer;
    }

    .btn-reload {
        border: 1px solid #cccccc;
        height: 30px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        padding: 0 10px;
        color: #cccccc;
        margin-right: 10px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
    }

    .btn-excel {
        border: 1px solid #333333;
        height: 30px;
        line-height: 30px;
        min-width: 110px;
        border-radius: 4px;
        color: #333333;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
    }
</style>
<div class="content">
    <div class="name">{$info.title}</div>
    <div class="flex align-center" style="margin-bottom: 20px">
        {if $info.status === 1}
        <div class="status">
            回收中
        </div>
        {elseif $info.status === 2 /}
        <div class="status" style="background: rgba(19,106,197,0.1);color:#136AC5;">
            已回收
        </div>
        {elseif $info.status === 3 /}
        已失效
        {/if}

        <div class="time">{:date('Y/m/d H:i',$info.created_at)}</div>
    </div>
    <div class="flex" style="height: 60px;background: #F8F8F8;align-items: center;padding-left: 20px;">
        <div style="text-align: center;">
            <div class="num">{$info.sending_num}</div>
            <div class="time">已发出</div>
        </div>
        <div style="margin-left: 60px;text-align: center;">
            <div class="num">{$info.recycling_num}</div>
            <div class="time">已回收</div>
        </div>
    </div>
    <div class="flex" style="align-items: center;margin: 20px 0;">
        <div class="flex" style="align-items: center;">
            <div class="label-name">合同类型</div>
            <div class="type" style="width: 179px;margin-left: 10px">{$info.type == 1 ?'学员':'合伙人'}合同</div>
        </div>
        <div class="flex" style="align-items: center;margin-left: 35px;">
            <div class="label-name">合同文件</div>
            <div class="file-content" style="margin-left: 10px">
                <div class="flex align-center">
                    <img src="/static/admin/images/word.png" class="file-icon">
                    <span style="margin-left: 20px">{$info.contract_file_name}</span>
                </div>
                <!--        <div class="look">预览</div>-->
            </div>
            <a href="{:env('TENCENT.COS_URL')}/{$info.contract_url}" target="_blank" style="color: #0171CF;margin-left: 10px;">下载</a>
        </div>
    </div>


    {if $info.type === 1}
    <div id="app">
        <div class="add-modal">
            <div class="add-make"></div>
        </div>
        <div class="label-name" style="font-weight: 600;margin-bottom: 20px">学员名单</div>
        <div class="flex margin-bottom-xs" style="flex-wrap: wrap;justify-content: space-between;">
            <div class="flex" style="flex: 1;">
                <div class="flex align-center margin-bottom-xs">
                    <span class="search-label">序号</span>
                    <input type="text" placeholder="请输入" class="input" style="width: 80px;" v-model="form.id">
                </div>
                <div class="flex align-center margin-bottom-xs">
                    <span class="search-label">姓名</span>
                    <input type="text" placeholder="孩子姓名" class="input" style="width: 130px;"
                           v-model="form.childs_name">
                </div>
                <div class="flex align-center margin-bottom-xs">
                    <span class="search-label">合同编码</span>
                    <input type="text" placeholder="请输入" class="input" style="width: 130px;" v-model="form.contract_no">
                </div>
                <div class="flex align-center margin-bottom-xs">
                    <span class="search-label">家长电话</span>
                    <input type="text" placeholder="请输入" class="input" style="width: 130px;" v-model="form.parent_phone">
                </div>
                <div class="btn-search"  @click="handleSearch">立即筛选</div>
                <div class="btn-reload" @click="handleReload">
                    <img src="/static/admin/images/lujin2.png" style="width: 16px;height: 16px;">
                </div>
            </div>
            <div class="btn-excel" @click="tableToExcel">导出表格</div>
        </div>
        <div style="max-height: 400px;overflow-y: scroll">
            <table id="table" class="layui-table" lay-even="" lay-skin="nob" style="border: 1px solid #CFCFCF;border-radius: 4px;">
                <colgroup>
                    <col width="80">
                    <col width="100">
                    <col width="100">
                    <col width="100">
                    <col width="100">
                    <col width="100">
                    <col width="100">
                    <col width="100">
                    <col width="50">
                </colgroup>
                <thead>
                <tr>
                    <th scope="col">序号</th>
                    <th scope="col">孩子姓名</th>
                    <th scope="col">家长微信</th>
                    <th scope="col">家长电话</th>
                    <th scope="col">分阶情况</th>
                    <th scope="col">是否同意</th>
                    <th scope="col">合同编码</th>
                    <th scope="col">签约时间</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody id="studentTbody">
                <tr v-for="item in list">
                    <th scope="row">{{item.index}}</th>
                    <td>{{item.childs_name}}</td>
                    <td>{{item.parent_wechat}}</td>
                    <td>{{item.parent_phone}}</td>
                    <td>{{item.grading_situation}}</td>
                    <td>{{item.status_cn}}</td>
                    <td>{{item.contract_no ? item.contract_no : '-'}}</td>
                    <td>{{item.success_at}}</td>
                    <td><a :href="item.document_url ? `{:env('TENCENT.COS_URL')}/${item.document_url}`:'javascript:;'">{{item.document_url ? '下载':'-'}}</a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    {/if}

    <div style="width: 70%;align-items: center;margin: 35px 0;" class="flex">
        <div class="label-name" style="margin-right: 10px;">签署链接</div>
        <div class="file-content1"
             style="display: flex; align-items: center;justify-content: space-between">
            <div class="type" style="min-width:200px;flex: 1;margin-bottom: 0;height: 32px;line-height: 32px;">{$info.sign_link}</div>
            <button type="button" class="btn btn-default" style="background-color: #0171CF;color: white;margin-left: 10px;"
                    data-name="contract" onclick="copy(`{$info.sign_link}`)">复制链接
            </button>
        </div>
    </div>

    <div class="flex">
        <div class="label-name" style="margin-right: 10px;">扫码签约</div>
        <div class="file-content1">
            <img style="display: block;width: 150px;height: auto;" src="{:env('TENCENT.COS_URL')}/{$info.sign_qr_code}"
                 alt="">
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/static/admin/js/xlsx.core.min.js"></script>
{if $info.type === 1}
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
<script>
    //TODO vue
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    id: '',
                    childs_name: '',
                    contract_no: '',
                    parent_phone: '',
                },
                initialList: {:json_encode($info.student_list)},
                list:{:json_encode($info.student_list)},
            }
        },

        methods: {
            tableToExcel() {
                let workbook = XLSX.utils.table_to_book(
                    document.getElementById('table'),
                    { raw: true }
                )
                XLSX.writeFile(workbook, "{$info.contract_file_name}_学员名单.xlsx", { type: 'binary' })
            },
            handleSearch() {
                let list = JSON.parse(JSON.stringify(this.initialList))
                if (this.form.id) {
                    list = list.filter(e => e.index == this.form.id)
                }
                list = list.filter(e => e.childs_name.includes(this.form.childs_name))
                list = list.filter(e => e.contract_no.includes(this.form.contract_no))
                list = list.filter(e => e.parent_phone.includes(this.form.parent_phone))
                console.log(list)
                this.list = list

            },
            handleReload() {
                let list = JSON.parse(JSON.stringify(this.initialList))
                this.list = list
                this.form = {
                    id: '',
                    childs_name: '',
                    contract_no: '',
                    parent_phone: '',
                }
            },
        }
    })
</script>
{/if}
<script>
    $('#select2').change(function () {
        if ($(this).val() == 1) {
            $('#student').show();
            $('input[name="student_list"]').prop('required', true); // 添加required属性
        } else {
            $('#student').hide();
            $('input[name="student_list"]').prop('required', false); // 移除required属性
        }
    })

    function copy(text) {
        let body = document.querySelector('body');
        let input = document.createElement('textarea');
        input.value = text;
        body.appendChild(input);
        input.select();
        document.execCommand('Copy');
        alert('复制成功');
        body.removeChild(input);
    }

    function submitHandler() {
        $.modal.close();
        // if ($.validate.form()) {
        //     $.operate.save(oasUrl, $('#form-add').serialize());
        // }
    }

    function chooseImages(e) {
        $('.images-list').append(`<div class="img">
                    <img src="{:env('TENCENT.COS_URL')}/${e}" alt="">
                    <input type="hidden" name="preview_url[]" value="${e}">
                    <i class="fa fa-close" onclick="removeImages(this)"></i>
                </div>`)
    }

    function removeImages(e) {
        $(e).parent().remove()
    }

    function chooseFile(inputName, accept) {
        var input = document.createElement('input');
        input.type = 'file';
        input.accept = accept;
        input.addEventListener('change', function (e) {
            let file = this.files[0];
            let fileNameInput = document.querySelector('input[name="' + inputName + '"]');
            fileNameInput.value = file.name;
            let load = layer.load(1)
            let fileReader = new FileReader();
            fileReader.onload = function (ev) {
                try {
                    var data = ev.target.result,
                        workbook = XLSX.read(data, {
                            type: 'binary'
                        }), // 以二进制流方式读取得到整份excel表格对象
                        XlsxPersons = []; // 存储获取到的数据
                } catch (e) {
                    console.log('文件类型不正确');
                    return;
                }
                // 遍历每张表读取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        var fromTo = workbook.Sheets[sheet]['!ref'];
                        console.log(fromTo);
                        var datas = workbook.Sheets[sheet];

                        // 如果有不规范数据可以在这里进行处理datas

                        XlsxPersons = XlsxPersons.concat(XLSX.utils.sheet_to_json(datas));
                        break; // 只读了第一张表
                    }
                }
                layer.close(load)
                for (let i = 0; i < XlsxPersons.length; i++) {
                    $('#studentTbody').append(`<tr>
                    <input type="hidden" name="students[${i}][index]" value="${XlsxPersons[i].index}">
                    <input type="hidden" name="students[${i}][childName]" value="${XlsxPersons[i].childName}">
                    <input type="hidden" name="students[${i}][wechat]" value="${XlsxPersons[i].wechat}">
                    <input type="hidden" name="students[${i}][phone]" value="${XlsxPersons[i].phone}">
                    <input type="hidden" name="students[${i}][gradation]" value="${XlsxPersons[i].gradation || '-'}">
                    <th scope="row">${XlsxPersons[i].index}</th>
                    <td>${XlsxPersons[i].childName}</td>
                    <td>${XlsxPersons[i].wechat}</td>
                    <td>${XlsxPersons[i].phone}</td>
                    <td>${XlsxPersons[i].gradation || '-'}</td>
                </tr>`)
                }
            };
            // 以二进制方式打开文件
            fileReader.readAsBinaryString(file);
        });

        input.click()
    }
</script>
{/block}
